<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>报表设计</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="author" content="Cheresting" />
    <!-- 自动添加 dayjs 到全局 -->
    <script src="./publicJs/dayjs.min.js"></script>
    <!-- 自动添加 vue 到全局 -->
    <script src="./publicJs/vue2/vue.js"></script>
    <script src="./publicJs/vue2/form-create.min.js"></script>

    <!-- 自动添加 axios 到全局 -->
    <script src="./publicJs/axios.min.js"></script>
    <!-- 自动添加 Cookies 到全局 -->
    <script src="./publicJs/js.cookie.min.js"></script>
    <!-- 自动添加 XLSX 到全局 -->
    <script src="./publicJs/xlsx.core.min.js"></script>

    <link rel="stylesheet" href="./publicJs/vue2/index.css" />
    <!-- <link rel="stylesheet" href="./publicJs/element-plus.index.css" /> -->
    <!-- 自动添加 ElementPlus 到全局 -->
    <script src="./publicJs/vue2/index.js"></script>
    <!-- <script src="./publicJs/element-plus.index.full.js"></script> -->

    <!-- 自动添加 FcDesigner 到全局 -->
    <script src="./publicJs/vue2/designer.js"></script>

    <title>报表设计</title>
  </head>

  <body>
    <div id="app">
      <div>
        <fc-designer height="90vh" ref="designer" />
      </div>
      <div style="text-align: center; margin-top: 10px">
        <el-button @click="getForm" type="primary">保存</el-button>
      </div>
    </div>
  </body>
  <script type="module">
    import myAxios from './myAxios/myAxios.js'
    import { showWarning } from './hooks/useMyMessageBox.js'
    import useMyXlsx from './hooks/useMyXlsx.js'
    import v4 from './publicJs/uuidv4.js'

    Vue.use(FcDesigner)
    new Vue({
      el: '#app',
      data: {
        loading: false,
      },
      created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
      },
      methods: {
        getForm() {
          //FcDesigner 生成的`JSON`
          const FcDesignerRule = this.$refs.designer.getRule()
          //FcDesigner 生成的`options`
          const FcDesignerOptions = this.$refs.designer.getOption()
          console.log('FcDesignerRule :>> ', FcDesignerRule)
          console.log('FcDesignerOptions :>> ', FcDesignerOptions)
          let params = `${v4()}\t${JSON.stringify(FcDesignerRule)}\t${JSON.stringify(FcDesignerOptions)}`
          myAxios
            .post('陈帅廷新增报表数据', params, '9911')
            .then((res) => {
              if (res.includes('成功')) {
                this.loading = false
                this.$message({
                  showClose: true,
                  type: 'success',
                  message: '提交成功!' + res,
                })
              } else {
                this.loading = false
                this.$message({
                  showClose: true,
                  type: 'danger',
                  message: '提交失败!' + res,
                })
              }
            })
            .catch((err) => {
              this.loading = false
              this.$message({
                showClose: true,
                type: 'danger',
                message: '提交失败!' + res,
              })
            })
        },
      },
    })
  </script>
</html>
<style>
  .marginTop10 {
    margin-top: 10px;
  }
</style>
